<template>
  <div class="full-box d-flex-c p-h-mini">
    <el-form
      :model="formData"
      class="export-form"
      size="small"
      label-position="left"
    >
      <el-form-item prop="ZTTMC">
        <template #label>
          <div class="flex-between">
            <span>专题图名称：</span>
            <div class="d-flex ai-c">
              <el-color-picker
                v-model="titleColor"
                size="mini"
                class="m-r-mini"
                @change="debounceChangeTitleData()"
              />
              <BKSelect
                size="mini"
                v-model="titleFontSize"
                :mock="sizesList"
                :clearable="false"
                style="width: 75px;margin-right: 10px;"
                @change="debounceChangeTitleData()"
              />
              <el-switch
                active-value="1"
                inactive-value="2"
                size="mini"
                v-model="formData.ZTTMC_XS"
                @change="debounceChangeTitleData()"
                :disabled="!formData.ZTTMC"
              />
            </div>
          </div>
        </template>
        <BKInput
          v-model="formData.ZTTMC"
          size="small"
          @input="debounceChangeTitleData()"
        />
      </el-form-item>
      <el-form-item prop="BZDW">
        <template #label>
          <div class="flex-between">
            <span>编制单位：</span>
            <div class="d-flex ai-c">
              <el-color-picker
                v-model="bzdwColor"
                size="mini"
                class="m-r-mini"
                @change="debounceChangeBzdwData()"
              />
              <BKSelect
                size="mini"
                v-model="bzdwFontSize"
                :mock="sizesList"
                :clearable="false"
                style="width: 75px;margin-right: 10px;"
                @change="debounceChangeBzdwData()"
              />
              <el-switch
                active-value="1"
                inactive-value="2"
                size="mini"
                v-model="formData.BZDW_XS"
                @change="debounceChangeBzdwData()"
                :disabled="!formData.BZDW"
              />
            </div>
          </div>
        </template>
        <BKInput
          v-model="formData.BZDW"
          size="small"
          @input="debounceChangeBzdwData()"
        />
      </el-form-item>
      <el-form-item prop="BZRQ">
        <template #label>
          <div class="flex-between">
            <span>编制日期：</span>
            <div class="d-flex ai-c">
              <el-color-picker
                v-model="bzrqColor"
                size="mini"
                class="m-r-mini"
                @change="debounceChangeBzrqData()"
              />
              <BKSelect
                size="mini"
                v-model="bzrqFontSize"
                :mock="sizesList"
                :clearable="false"
                style="width: 75px;margin-right: 10px;"
                @change="debounceChangeBzrqData()"
              />
              <el-switch
                active-value="1"
                inactive-value="2"
                size="mini"
                v-model="formData.BZRQ_XS"
                @change="debounceChangeBzrqData()"
                :disabled="!formData.BZRQ"
              />
            </div>
          </div>
        </template>
        <el-date-picker
          v-model="formData.BZRQ"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          size="small"
          style="width: 100%;"
          @change="debounceChangeBzrqData()"
        />
      </el-form-item>
      <div class="legend-setting">
        <div class="title">
          图例：
        </div>
        <div class="right-switch">
          <el-switch
            active-value="1"
            inactive-value="2"
            size="mini"
            v-model="formData.TL_XS"
            @change="$emit('toggleLegend', formData.TL_XS)"
          />
        </div>
        <div
          class="d-flex ai-c"
        >
          <span
            class="f-14"
            style="color: #76778e;"
          >位置：</span>
          <div
            :class="['button c-pointer', currentLegendButton === item.value? 'active' : '']"
            v-for="(item, i) in legendPosition"
            :key="i"
            @click="currentLegendButton = item.value"
          >
            {{ item.text }}
          </div>
        </div>
      </div>
      <div class="legend-setting">
        <div
          class="title"
        >
          指南针：
        </div>
        <div class="right-switch">
          <el-switch
            active-value="1"
            inactive-value="2"
            size="mini"
            v-model="formData.ZNZ_XS"
            @change="$emit('toggleCompass', formData.ZNZ_XS)"
          />
        </div>
        <div
          class="d-flex ai-c"
        >
          <span
            class="f-14"
            style="color: #76778e;"
          >位置：</span>
          <div
            :class="['button c-pointer', currentCompassButton === item.value? 'active' : '']"
            v-for="(item, i) in legendPosition"
            :key="i"
            @click="currentCompassButton = item.value"
          >
            {{ item.text }}
          </div>
        </div>
      </div>
      <div
        class="d-flex-c"
        style="gap: 10px;"
      >
        <!-- <el-checkbox
          v-model="formData.ZM_XS"
          true-label="1"
          false-label="2"
          size="mini"
          style="margin-right: 10px;"
          @change="$emit('toggleShowText', formData.ZM_XS)"
        >
          显示地图元素名称
        </el-checkbox> -->
        <!-- <el-checkbox
          v-model="formData.ZNZ_XS"
          true-label="1"
          false-label="2"
          size="mini"
          style="margin-right: 10px;"
          @change="$emit('toggleCompass', formData.ZNZ_XS)"
        >
          显示指南针
        </el-checkbox> -->
        <el-checkbox
          v-model="formData.ZWQY_XS"
          true-label="1"
          false-label="2"
          size="mini"
          style="margin-right: 10px;"
        >
          显示周围区域
        </el-checkbox>
      </div>
      <div class="size-setting">
        <div class="title">
          专题图尺寸设置
        </div>
        <BKRadio
          v-model="formData.ZTTCCSZ"
          dictionary-key="ZTTCC"
          size="mini"
          class="set-radio"
        />
        <div class="row-col">
          <BKRadio
            v-model="formData.ZTT_FX"
            dictionary-key="ZTT_FX"
            size="mini"
            :disabled="!['2', '3'].includes(formData.ZTTCCSZ)"
          />
        </div>
        <div
          class="custom-size d-flex-c ai-c jc-c f-14"
          style="color: #76778d;"
        >
          <div class="d-flex ai-c t-nowrap">
            宽度：<BKInput
              v-model="formData.KD"
              size="small"
              class="m-r-mini"
              is-number
              :digits="1"
              :disabled="formData.ZTTCCSZ !== '4'"
              style="width: 120px;"
            />cm
          </div>
          <div
            class="d-flex ai-c t-nowrap"
            style="margin-top: 17px;"
          >
            高度：<BKInput
              v-model="formData.CD"
              size="small"
              class="m-r-mini"
              is-number
              :digits="1"
              :disabled="formData.ZTTCCSZ !== '4'"
              style="width: 120px;"
            />cm
          </div>
        </div>
      </div>
      <div class="line" />
      <div class="d-flex ai-c p-b-mini">
        <el-button
          size="small"
          @click="exportData('1')"
          type="primary"
          class="flex-1"
        >
          下载预览
        </el-button>
        <el-button
          size="small"
          @click="exportData('2')"
          type="primary"
          class="flex-1"
        >
          导出并保存至专题图录
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { debounce } from 'throttle-debounce'
import { sizesList } from '../../../utils'
export default {
  name: 'ExportPanel',
  data () {
    return {
      formData: {
        ZTTMC: '',
        ZTTMC_XS: '2',
        BZDW: '',
        BZDW_XS: '2',
        BZRQ: this.$utils.createDate().format('YYYY-MM-DD'),
        BZRQ_XS: '2',
        TL_XS: '1',
        ZNZ_XS: '1',
        ZWQY_XS: '1',
        ZTTCCSZ: '1',
        ZTT_FX: '1',
        KD: '',
        CD: '',
        IDSJSON: '',
        ZM_XS: '1'
      },
      paperSize: {
        2: [2478, 3504.6], // 21cm x 29.7cm  1:118
        3: [3504.6, 4956] // 29.7cm x 42cm 1:118
      },
      titleFontSize: '8',
      titleColor: '#FF0000',
      sizesList: sizesList,
      bzdwFontSize: '11',
      bzdwColor: '#FF0000',
      bzrqFontSize: '11',
      bzrqColor: '#FF0000',
      legendPosition: [
        { text: '左上', value: '1' },
        { text: '左下', value: '2' },
        { text: '右上', value: '3' },
        { text: '右下', value: '4' },
        { text: '自定义', value: '5' }
      ],
      currentLegendButton: '4',
      currentCompassButton: '1',
      legendFontSizes: [
        { text: '大', value: '1' },
        { text: '中', value: '2' },
        { text: '小', value: '3' }
      ],
      currentLegendFontSize: '3'
    }
  },
  watch: {
    'formData.ZTTMC': {
      handler (v) {
        if (v) {
          this.formData.ZTTMC_XS = '1'
        }
      }
    },
    'formData.BZDW': {
      handler (v) {
        if (v) {
          this.formData.BZDW_XS = '1'
        }
      }
    },
    'formData.BZRQ': {
      handler (v) {
        if (v) {
          this.formData.BZRQ_XS = '1'
        }
      }
    },
    'formData.ZWQY_XS': {
      handler (v) {
        this.debounceCalculateBoundary()
      }
    },
    'formData.ZTTCCSZ': {
      handler (v) {
        this.debounceChangeContainer()
      }
    },
    'formData.ZTT_FX': {
      handler (v) {
        this.debounceChangeContainer()
      }
    },
    'formData.CD': {
      handler (v) {
        // if (Number(v) > 45) {
        //   this.formData.CD = 45
        // }
        this.debounceChangeContainer()
      }
    },
    'formData.KD': {
      handler (v) {
        // if (Number(v) > 45) {
        //   this.formData.KD = 45
        // }
        this.debounceChangeContainer()
      }
    },
    currentLegendButton (v) {
      this.$store.commit('map-making/setLegendData', Object.assign(this.legendData, { positionType: v }))
      this.$root.$emit('updateLegend')
    },
    currentLegendFontSize (v) {
      this.$store.commit('map-making/setLegendData', Object.assign(this.legendData, { fontSize: v }))
      this.$root.$emit('updateLegend')
    },
    currentCompassButton (v) {
      this.$store.commit('map-making/setCompassPosition', Object.assign(this.compassPosition, { positionType: v }))
      this.$root.$emit('updateCompass')
    }
  },
  computed: {
    ...mapState('map-making', ['exportFormData', 'titleData', 'otherData', 'legendData', 'dateData', 'compassPosition'])
  },
  created () {
    this.debounceChangeContainer = debounce(50, this.changeContainer)
    this.debounceCalculateBoundary = debounce(50, this.calculateBoundary)
    this.debounceChangeTitleData = debounce(50, this.changeTitleData)
    this.debounceChangeBzdwData = debounce(50, this.changeBzdwData)
    this.debounceChangeBzrqData = debounce(50, this.changeBzrqData)
    this.$root.$on('updateMapMaking', this.updateMapMaking)
  },
  beforeDestroy () {
    this.$root.$off('updateMapMaking', this.updateMapMaking)
  },
  methods: {
    exportData (type) {
      console.log(this.formData)
      if (!this.formData.ZTTMC) {
        this.$message.warning('请填写专题图名称')
        return
      }
      const sizes = this.formData.ZTTCCSZ === '4' ? [this.formData.KD * 118, this.formData.CD * 118] : (['2', '3'].includes(this.formData.ZTTCCSZ) ? (this.formData.ZTT_FX === '1' ? this.paperSize[this.formData.ZTTCCSZ] : [...this.paperSize[this.formData.ZTTCCSZ]].reverse()) : null)
      this.$emit(type === '1' ? 'previewImage' : 'exportData', this.formData, sizes)
    },
    calculateBoundary () {
      this.$emit('calculateBoundary', this.formData.ZWQY_XS === '2')
    },
    changeContainer () {
      if (['2', '3'].includes(this.formData.ZTTCCSZ)) {
        this.$emit('changeContainerStyle', this.formData.ZTT_FX === '1' ? this.paperSize[this.formData.ZTTCCSZ] : [...this.paperSize[this.formData.ZTTCCSZ]].reverse())
      } else if (this.formData.ZTTCCSZ === '4') {
        if (this.formData.KD && this.formData.CD) {
          this.$emit('changeContainerStyle', [this.formData.KD * 118, this.formData.CD * 118])
        } else {
          this.$emit('changeContainerStyle', null)
        }
      } else {
        this.$emit('changeContainerStyle', null)
      }
    },
    updateMapMaking () {
      const obj = {}
      Object.keys(this.formData).forEach(key => {
        obj[key] = this.exportFormData[key]
      })
      this.formData = obj
      this.titleFontSize = this.titleData.fontSize
      this.titleColor = this.titleData.color
      this.bzdwFontSize = this.otherData.bzFontSize
      this.bzdwColor = this.otherData.bzColor
      this.bzrqFontSize = this.dateData.bzFontSize
      this.bzrqColor = this.dateData.bzColor
      this.debounceChangeContainer()
      this.debounceCalculateBoundary()
      this.$emit('toggleCompass', this.formData.ZNZ_XS)
      this.$emit('toggleLegend', this.formData.TL_XS)
      this.$emit('toggleShowText', this.formData.ZM_XS)
      this.debounceChangeTitleData()
      this.debounceChangeBzdwData()
    },
    changeTitleData () {
      this.$emit('toggleShowTitle', this.formData.ZTTMC_XS)
      this.$store.commit('map-making/setTitleData', Object.assign(this.titleData, {
        title: this.formData.ZTTMC,
        fontSize: this.titleFontSize,
        color: this.titleColor
      }))
      if (!this.formData.ZTTMC) {
        // 没有标题自动切回不显示
        this.formData.ZTTMC_XS = '2'
      }
    },
    changeBzdwData () {
      this.$emit('toggleShowBzdw', this.formData.BZDW_XS)
      this.$store.commit('map-making/setOtherData', Object.assign(this.otherData, {
        bzdw: this.formData.BZDW,
        // bzrq: this.formData.BZRQ,
        bzFontSize: this.bzdwFontSize,
        bzColor: this.bzdwColor
      }))
      if (!this.formData.BZDW) {
        // 没有编制单位自动切回不显示
        this.formData.BZDW_XS = '2'
      }
    },
    changeBzrqData () {
      this.$emit('toggleShowBzrq', this.formData.BZRQ_XS)
      this.$store.commit('map-making/setDateData', Object.assign(this.dateData, {
        bzrq: this.formData.BZRQ,
        bzFontSize: this.bzrqFontSize,
        bzColor: this.bzrqColor
      }))
      if (!this.formData.BZRQ) {
        // 没有日期自动切回不显示
        this.formData.BZRQ_XS = '2'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .export-form {
  .el-form-item:nth-child(1),
  .el-form-item:nth-child(2),
  .el-form-item:nth-child(3) {
    .el-form-item__label {
      width: 100%;
      padding: 0;
      position: relative;
      z-index: 10;
    }
  }

  .el-form-item:nth-child(3) {
    margin-bottom: 21px !important;
  }

  .el-form-item {
    margin-bottom: 5px;
  }
}

.size-setting {
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 26px 14px 16px;
  margin-top: 32px;

  > .title {
    position: absolute;
    top: -10px;
    left: 12px;
    background: #fff;
    width: 110px;
    color: #424e61;
    font-size: 14px;
    text-align: left;
  }

  ::v-deep .el-radio-group {
    display: flex;
    flex-direction: column;

    .el-radio {
      margin-bottom: 21px;
    }
  }

  .row-col {
    position: absolute;
    right: 0;
    top: 57px;
    width: 45%;
    height: 65px;
    z-index: 2;
    padding-left: 28px;
    padding-top: 6px;
    border-left: 1px #dcdfe6 dashed;
  }
}

.line {
  width: 100%;
  height: 1px;
  background: #dcdfe6;
  margin: 12px 0;
}

.legend-setting {
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 26px 3px 16px 12px;
  margin: 20px 0;

  > .title {
    position: absolute;
    top: -10px;
    left: 8px;
    background: #fff;
    width: auto;
    color: #424e61;
    font-size: 14px;
    text-align: center;
    padding: 0 4px;
  }

  > .right-switch {
    position: absolute;
    top: -10px;
    right: 2px;
    background-color: #fff;
    padding-left: 4px;
  }

  .button {
    font-size: 12px;
    color: #76778eb4;
    background: #ebecf0;
    border-radius: 4px;
    border: 1px solid #ebecf0;
    padding: 3px 5px;

    &:not(:last-child) {
      margin-right: 5px;
    }

    &.active,
    &:hover {
      color: #0151dc;
      border-color: #0151dc;
    }
  }

  .button.font-size {
    padding: 3px 15px;
  }
}

.set-radio {
  position: relative;

  &::after {
    position: absolute;
    top: 26px;
    left: -8px;
    right: -8px;
    height: 73px;
    border-radius: 6px;
    border: 1px #dcdfe6 dashed;
    z-index: 0;
    content: "";
    pointer-events: none;
  }
}

</style>
